Frame Wizard

Introduction

The Frames Tool in HotDog allows you to divide a browser window into multiple, independently scrollable frames of arbitrary layout, each of which can display separate HTML documents. That way, hyperlinks in one frame can be used to update the contents of other frames, making it possible for Web programmers to build visually pleasing, sophisticated WWW pages with easy-to-navigate user interfaces built in. Netscape's frame extensions also make it possible to launch multiple browser windows and to control the contents of each window through hyperlinks in other windows.

Starting the Frame Wizard.

On the Frame menu, select Frame Wizard.

How to Create a website using Frames

The HotDog Frames Wizard allows you to easily create a frames-based webpage on which several HTML documents can be displayed simultaneously in their own independently scrollable and resizable windows.

Hypertext links which appear on a page in one of these frames can then be modified with the "target" parameter so that the pages they link to appear in other frames, or take up the entire Web browser screen, or even appear in a new Web browser screen. This capability allows the user to create websites that are easy to navigate and maintain, whilst also being aesthetically pleasing.

Where is the Frames Wizard?

From the Frame menu, select Frame Wizard.

How To Create A website Using Frames

The following tutorial describes the steps taken to produce an example HTML document, "FrameIndex.HTML", using the HotDog Frames Supertool. This example document uses two frames to aid site navigation. The frame on the left-hand side of the browser window contains a number of buttons that act as hypertext links to various pages which, through the use of the "target" parameter, appear in the frame on the right-hand side of the browser window. The steps below can be used as a general guide for creating any site that uses frames.

Before making a webpage with frames, the HTML documents that will appear in each of the frames on the page must be created. Pre-made pages for the example frames document we will create are listed and described below:

NOTE

These documents are stored in the HTMLHelp/Tutorials directory off the main HotDog directory. You can also access them with the website Resource Manager.

frametoolbar.HTML

The page displaying the toolbar with links to all the other webpages.

framewelcome1.HTML

The introductory page.

frameart1.HTML

Deals with Bosch's Art.

framehistory1.HTML

Deals with a history of Bosch's life.

framecontactme.HTML

A feedback page.

Now start a new webpage in HotDog to insert the frames code into. To start a new page select ‘New’ from the ‘File’ menu in HotDog and then click on ‘Default HotDog Template’ in the screen that appears, or just click on the ‘New Document’ button in the File toolbar. A new document with beginning and ending standard HTML tags will appear on the screen. Save the document to the same directory as the example webpages listed in step 2 before adding anything to it by selecting ‘Save’ from the ‘File’ menu - call the new page "FrameIndex.HTML".
Start the Frames Wizard by selecting ‘Frames’ from the ‘Insert’ menu
The Frame Wizard will appear. Click on the ‘Next>>’ button to go to the next screen in the Wizard.
Select ‘Columns’ from the ‘Arrange Frames by:’ drop down list. The number of frames is (conveniently!) set to "2" by default. Click on the ‘Next>>’ button to accept these settings and continue to the next screen in the Wizard.
The Frames Wizard screen now being displayed is where frames are sized and their attributes are set. The frame on the left hand side is highlighted in blue to show that it is the frame whose attributes are currently being displayed. Resize this frame by using the mouse to drag the right hand edge of the frame towards the left hand side of the screen. You will see the width value change as you drag the frame. Drag the frame until the width setting is 16%.
In the ‘Frame Name’ text field, type "toolbar".
In the Frame URL field either type "frametoolbar.HTML" or use the ‘Browse’ button next to the text field to locate the HTML file.
If you wanted a border around the page within this frame you would enter a pixel value in the Margin (W) and Margin (H) text fields. For the purposes of this tutorial however we will leave these fields blank.
Select ‘No’ from the ‘Scrolling’ drop-down list to suppress the appearance of scroll bars within this frame (selecting ‘Yes’ will make the scroll bars appear regardless of whether they are needed whilst selecting ‘Auto’ will cause scroll bars to appear if the page to be displayed within this frame is larger than the frame).
Leave the ‘Resizable’ check box unchecked to stop users from being able to resize the index frame.
You have just finished defining the index frame. Now click on the right hand frame to specify its parameters.
With the right hand frame highlighted in blue, enter the following attributes:

Frame Name

"mainpage".

Frame URL

Either enter "FrameWelcome1" or browse to find this file and select it.

Margin (H)

Leave as 0.

Margin (W)

Leave as 0.

Scrolling

"Auto".

Resizable

Leave unchecked.

You have now finished specifying the attributes of your frames page. To add the HTML code for these frames to your new page, click on the "Finish" button at the bottom of the Wizard screen.
The code for the frames will then be added to your page and will resemble the following:

</frameset>

Delete the <BODY> and </BODY> tags from the frames Web page. The <FRAMESET> and </FRAMESET> tags which were added to your page are replacement tags for the <BODY> tags. If the <BODY> tags are not removed then the frames will not display on some browsers. Save your page.
You have now created a page called "FrameIndex.HTML" which contains two frames; one called "toolbar" and one called "mainpage". The first frame, "toolbar", displays a webpage called "frametoolbar.HTML". The second frame, "mainpage", contains a page called "FrameWelcome1.HTML".

If you examine the HTML code in the "frametoolbar.HTML" page you will notice that the links it contains include a TARGET parameter, such as in the following example:

</a>

This target parameter tells the browser to make the specified link, "FrameContactme.HTML", appear in the frame called "mainpage". Click here for further explaination of targets.

So the links in the toolbar frame cause pages to appear in the mainpage frame, because each link on the page "frametoolbar.HTML" which appears in the toolbar frame contains a target parameter specifying "mainpage" as the frame to display the link in.

The steps outlined above can be used as a guide for creating any frames-based page.

Click here to view the demonstration webpages. (Note - you may have to resize the help window.)

frametoolbar.HTML	The page displaying the toolbar with links to all the other webpages.
framewelcome1.HTML	The introductory page.
frameart1.HTML	Deals with Bosch's Art.
framehistory1.HTML	Deals with a history of Bosch's life.
framecontactme.HTML	A feedback page.

Frame Name	"mainpage".
Frame URL	Either enter "FrameWelcome1" or browse to find this file and select it.
Margin (H)	Leave as 0.
Margin (W)	Leave as 0.
Scrolling	"Auto".
Resizable	Leave unchecked.